import React from 'react'
import { Input, Row, Col, Button, Space, Radio } from 'antd'
import { DeleteOutlined } from '@ant-design/icons'
import AllSetoption from '../AllSetoption'
import { stubFalse } from 'lodash'
const radioComponents = (props) => {
    const {
        data = {},
        index,
        selectIndex,
        onChange
    } = props
    const {
        title,
        type,
        label,
        require = false,
        desc,
        rule = '',
        option = [],
        value = ''
    } = data
    return <div onClick={(e) => {
    }}>
        <Row style={{ padding: 24, background: "#ffffff" }} gutter={[36, 12]}>
            <Col style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }} span={24}>
                <div>{require ? <span style={{ marginRight: 4, color: 'red' }}>*</span> : ''}{index}.{title}</div>
                <div></div>
                <div>
                    {selectIndex == index ? <Space>
                        <Button onClick={(e) => {
                            e.stopPropagation()
                            onChange({
                                changeType: 'coby',
                                data: data,
                            })
                        }}>复制</Button>
                        <Button onClick={(e) => {
                            e.stopPropagation()
                            onChange({
                                changeType: 'delete',
                            })
                        }}>删除</Button>
                    </Space> : ''}
                </div>
            </Col>
            <Col span={12} offset={6}>
                <Input onChange={(e) => {
                    onChange({
                        changeType: 'update',
                        data: {
                            ...data,
                            label: e.target.value,

                        },
                        index: index
                    })
                }} value={label} placeholder='请输入题目标题'></Input>
            </Col>
            <Col span={12} offset={6}>
                <Input onChange={(e) => {
                    onChange({
                        changeType: 'update',
                        data: {
                            ...data,
                            desc: e.target.value
                        },
                        index: index
                    })
                }} value={desc} placeholder='请输入题目描述（选填）'></Input>
            </Col>
            <Col span={12} offset={6}>
                {option.map((item, o) => {
                    const { label, type = 'default', associationList = [] } = item
                    if (type === 'other') {
                        return <Row gutter={[0, 0]}>
                            <Col span={24}>
                                <Radio checked={value === label} disabled>
                                    <Space>
                                        <Input onChange={(e) => {
                                            onChange({
                                                changeType: 'update',
                                                data: {
                                                    ...data,
                                                    option: option.map((item, c) => {
                                                        if (c === o) {
                                                            return {
                                                                ...item, label: e.target.value
                                                            }
                                                        }
                                                        else {
                                                            return item
                                                        }
                                                    })
                                                },
                                                index: index
                                            })
                                        }} value={label}></Input>
                                        <DeleteOutlined onClick={(e) => {
                                            onChange({
                                                changeType: 'update',
                                                data: {
                                                    ...data,
                                                    option: option.filter((item, c) => {
                                                        if (c === o) {
                                                            return false
                                                        }
                                                        else {
                                                            return true
                                                        }
                                                    })
                                                },
                                                index: index
                                            })
                                        }}></DeleteOutlined>
                                    </Space>

                                </Radio>
                            </Col>
                            <Col span={24}>
                                <Space>
                                    {associationList.map(val => {
                                        return <div style={{ marginTop: 12, color: '#999999' }}>{'显示' + (val + 1) + '题'}</div>
                                    })}
                                </Space>
                            </Col>
                            <Col span={24}>
                                <Input style={{ marginLeft: 24 }} disabled={true} placeholder='读写者回答区'></Input>
                            </Col>

                        </Row>
                    }
                    else {
                        return <div>
                            <div>
                                <Radio checked={value === label} disabled>
                                    <Space>
                                        <Input onChange={(e) => {
                                            onChange({
                                                changeType: 'update',
                                                data: {
                                                    ...data,
                                                    option: option.map((item, c) => {
                                                        if (c === o) {
                                                            return {
                                                                ...item, label: e.target.value
                                                            }
                                                        }
                                                        else {
                                                            return item
                                                        }
                                                    })
                                                },
                                                index: index
                                            })
                                        }} value={label}></Input>
                                        <DeleteOutlined onClick={(e) => {
                                            onChange({
                                                changeType: 'update',
                                                data: {
                                                    ...data,
                                                    option: option.filter((item, c) => {
                                                        if (c === o) {
                                                            return false
                                                        }
                                                        else {
                                                            return true
                                                        }
                                                    })
                                                },
                                                index: index
                                            })
                                        }}></DeleteOutlined>
                                    </Space>

                                </Radio>
                            </div>
                            <div>
                                <Space>
                                    {associationList.map(val => {
                                        return <div style={{ fontSize: 12, marginTop: 12, color: '#999999' }}>{'显示' + (val + 1) + '题'}</div>
                                    })}
                                </Space>
                            </div>
                        </div>
                    }

                })}
            </Col>
            <Col span={12} offset={6}>
                <Space>
                    <Button onClick={() => {
                        onChange({
                            changeType: 'update',
                            data: {
                                ...data,
                                option: [...option, { label: `选项${option.length + 1}` }]
                            },
                            index: index
                        })
                    }} type='link'>+添加选项</Button>

                    <Button onClick={() => {
                        onChange({
                            changeType: 'update',
                            data: {
                                ...data,
                                option: [...option, { label: `其他`, type: 'other' }]
                            },
                            index: index
                        })
                    }} type='link'>+添加其他选项</Button>
                    <AllSetoption {...props}></AllSetoption>
                </Space>
            </Col>
        </Row>
    </div>
}
export default radioComponents